<template>
  <div class="form-block-inner">
    <Form
      ref="formItem"
      :rules="ruleValidate"
      :model="formItem"
      label-position="top"
    >
      <div class="title-style">沈阳市监管类资金基本信息</div>
      <Row :gutter="16">
        <Col span="8">
          <FormItem prop="project_name" label="项目名称:">
            <Input v-model="formItem.project_name" placeholder="填报项目名称" />
          </FormItem>
        </Col>
        <Col span="11">
          <FormItem label="资金类型" prop="salary_type" class="dx">
            <RadioGroup
              v-model="formItem.salary_type"
              placeholder="请选择资金类型"
            >
              <Radio label="1">质保金</Radio>
              <Radio label="2">抵押金</Radio>
              <Radio label="3">保证金</Radio>
              <Radio label="99">其他</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col
          span="5"
          v-if="this.formItem.salary_type === '99'"
          style="margin-left: -18%"
        >
          <FormItem prop="other_salary_type" label="其他资金类型:">
            <Input
              v-model="formItem.other_salary_type"
              placeholder="请填报其他资金类型"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem prop="salary_limit" label="资金额度:">
            <Input
              v-model="formItem.salary_limit"
              type="number"
              placeholder="请填报资金额度"
            >
              <span slot="append">万元</span>
            </Input>
          </FormItem>
        </Col>
        <Col span="11">
          <FormItem label="资金来源" prop="salary_source" class="dx">
            <Select
              v-model="formItem.salary_source"
              placeholder="请选择资金来源"
              style="width: 260px"
            >
              <Option value="1">个人缴纳</Option>
              <Option value="2">企业缴纳</Option>
              <Option value="3">社会机构缴纳</Option>
              <Option value="99">其他</Option>
            </Select>
          </FormItem>
        </Col>
        <Col
          span="5"
          v-if="this.formItem.salary_source === '99'"
          style="margin-left: -18%"
        >
          <FormItem prop="other_salary_source" label="其他资金来源:">
            <Input
              v-model="formItem.other_salary_source"
              placeholder="请填报其他资金来源"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem prop="project_cycle" label="项目周期:">
            <Input
              v-model="formItem.project_cycle"
              placeholder="请填报项目周期"
            />
          </FormItem>
        </Col>
        <Col span="11">
          <FormItem label="返还周期:" prop="return_cycle" class="dx">
            <RadioGroup
              v-model="formItem.return_cycle"
              placeholder="请选择返还周期"
            >
              <!--                            <Radio label="1">一次性</Radio>-->
              <Radio label="2">周返还</Radio>
              <Radio label="3">月返还</Radio>
              <Radio label="4">季度返还</Radio>
              <Radio label="5">年度返还</Radio>
              <Radio label="99">其他</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col
          span="5"
          v-if="this.formItem.return_cycle === '99'"
          style="margin-left: -10%"
        >
          <FormItem prop="other_return_cycle" label="其他返还周期:">
            <Input
              v-model="formItem.other_return_cycle"
              placeholder="请填报其他返还周期"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <FormItem prop="account_bank" label="开户银行:">
            <CheckboxGroup
              v-model="formItem.account_bank"
              @on-change="option"
              placeholder="请选择开户银行"
            >
              <Checkbox label="盛京银行"></Checkbox>
              <Checkbox label="中国工商银行"></Checkbox>
              <Checkbox label="中国建设银行"></Checkbox>
              <Checkbox label="中国农业银行"></Checkbox>
              <Checkbox label="中国银行"></Checkbox>
              <Checkbox label="中国交通银行"></Checkbox>
              <Checkbox label="中国邮政储蓄银行"></Checkbox>
              <Checkbox label="中信银行"></Checkbox>
              <Checkbox label="光大银行"></Checkbox>
              <Checkbox label="招商银行"></Checkbox>
              <Checkbox label="浦发银行"></Checkbox>
              <Checkbox label="民生银行"></Checkbox>
              <Checkbox label="华夏银行"></Checkbox>
              <Checkbox label="平安银行"></Checkbox>
              <Checkbox label="兴业银行"></Checkbox>
              <Checkbox label="广发银行"></Checkbox>
              <Checkbox label="渤海银行"></Checkbox>
              <Checkbox label="浙商银行"></Checkbox>
              <Checkbox label="恒丰银行"></Checkbox>
              <Checkbox label="其他"></Checkbox>
              <div v-show="check" class="other-style">
                <Input
                  v-model="formItem.other_account_bank"
                  id="hhhh"
                  placeholder="填报其他开户银行"
                />
              </div>
            </CheckboxGroup>
          </FormItem>
        </Col>
        <!--                <Col span="5" v-if="check">-->
        <!--                    <FormItem prop="other_account_bank" label="其他开户银行:">-->
        <!--                        <Input v-model="formItem.other_account_bank" placeholder="填报其他开户银行"/>-->
        <!--                    </FormItem>-->
        <!--                </Col>-->
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <FormItem prop="project_duty" label="项目责任：">
            <Input
              v-model="formItem.project_duty"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              placeholder="请输入项目责任"
            ></Input>
          </FormItem>
        </Col>
        <!--                <Col span="5" v-if="check">-->
        <!--                    <FormItem prop="other_account_bank" label="其他开户银行:">-->
        <!--                        <Input v-model="formItem.other_account_bank" placeholder="填报其他开户银行"/>-->
        <!--                    </FormItem>-->
        <!--                </Col>-->
      </Row>
      <Divider />
      <div class="button-group">
        <Button type="primary" @click="save()" :loading="btnLoading"
          >保存数据</Button
        >
      </div>
    </Form>
  </div>
</template>

<script>
import {
  superviseinsert,
  supervisesupdate
  // selectOK
} from '@/api/setting/capital'
export default {
  name: 'SuperviseCapital',
  components: {},
  data () {
    return {
      check: false,
      ruleValidate: {
        project_name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        salary_type: [
          { required: true, message: '资金类型不能为空', trigger: 'change' }
        ],
        other_salary_type: [
          { required: true, message: '其他资金类型不能为空', trigger: 'blur' }
        ],
        salary_limit: [
          { required: true, message: '资金额度不能为空', trigger: 'blur' }
        ],
        salary_source: [
          { required: true, message: '资金来源不能为空', trigger: 'change' }
        ],
        other_salary_source: [
          { required: true, message: '其他资金来源不能为空', trigger: 'blur' }
        ],
        project_cycle: [
          { required: true, message: '项目周期不能为空', trigger: 'blur' }
        ],
        return_cycle: [
          { required: true, message: '返还周期不能为空', trigger: 'change' }
        ],
        other_return_cycle: [
          { required: true, message: '其他返还周期不能为空', trigger: 'blur' }
        ],
        account_bank: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: '开户银行不能为空',
            trigger: 'change'
          }
        ],
        other_account_bank: [
          { required: true, message: '其他开户银行不能为空', trigger: 'blur' }
        ]
      },
      formItem: {
        id: '',
        project_name: '',
        salary_type: '',
        other_salary_type: '',
        salary_limit: '',
        salary_source: '',
        other_salary_source: '',
        project_cycle: '',
        return_cycle: '',
        other_return_cycle: '',
        account_bank: [],
        project_duty: ''
      },
      btnLoading: false,
      rtobj: {}
    }
  },
  computed: {},
  props: {},
  mounted () {
    this.vtype = this.$route.query.vtype

    if (this.$route.query.para) {
      this.formItem = this.$route.query.para
      let banks = this.formItem.account_bank.toString()
      if (banks.indexOf('其他') >= 0) {
        this.check = true
      } else {
        this.check = false
        delete this.formItem.other_account_bank
      }
      // console.log(this.formItem, '!!!!!')
    }

    // if(this.vtype==='2'){
    //   this.success()
    // }
  },
  methods: {
    option (val) {
      let banks = val.toString()
      if (banks.indexOf('其他') >= 0) {
        this.check = true
      } else {
        this.check = false
        delete this.formItem.other_account_bank
      }
    },
    save () {
      if (this.vtype === '1') {
        if (this.check === true) {
          if (
            this.formItem.other_account_bank === undefined ||
            this.formItem.other_account_bank === ''
          ) {
            this.$Message.error('其他开户银行不能为空')
          } else {
            // console.log(this.$route.query.para.id,'this.$route.query.para.id')
            // this.formItem.id = this.$route.query.para.id
            this.$refs['formItem'].validate((valid) => {
              if (valid) {
                superviseinsert(this.formItem).then((ret) => {
                  if (ret.data.errcode === 0) {
                    this.$Message.success('添加成功!')
                    // this.$router.push({
                    //   name: 'projectCapitalList'
                    // })
                  } else {
                    this.$Message.error('添加失败！！！' + ret.data.errmsg)
                  }
                })
              } else {
                this.$Message.error('请检查必填项！！!')
              }
            })
          }
        } else {
          // this.formItem.id = this.$route.query.para.id
          // console.log(this.formItem.id, "this.formItem.id");
          this.$refs['formItem'].validate((valid) => {
            if (valid) {
              // 增加保存数据
              superviseinsert(this.formItem).then((ret) => {
                // console.log(ret.data.data, "retdata");
                if (ret.data.errcode === 0) {
                  this.$Message.success('保存成功!')
                  this.rtobj = ret.data.data
                  localStorage.setItem('id', this.rtobj.id)
                  // this.$router.push({
                  //   name: 'projectCapitalList'
                  // })
                  this.confirmd()
                } else {
                  this.$Message.error('保存失败！！！' + ret.data.errmsg)
                }
              })
            } else {
              this.$Message.error('请检查必填项！！!')
            }
          })
        }
      } else if (this.vtype === '2') {
      //   console.log(localStorage.getItem('id'),'if')
      //   let id = localStorage.getItem('id')
      //    selectOK({ id: id }).then((res) => {
      //   console.log(this.rtobj.id,'this.rtobj.id')
      //     this.formItem = res.data.data;
      //     console.log(this.formItem,'this.formItem')
      //      console.log(res.data,'res.data.data')

        // });
        if (this.check === true) {
          if (
            this.formItem.other_account_bank === undefined ||
            this.formItem.other_account_bank === ''
          ) {
            this.$Message.error('其他开户银行不能为空')
          } else {
            // this.formItem.id = this.$route.query.para.id;
            this.$refs['formItem'].validate((valid) => {
              if (valid) {
                supervisesupdate(this.formItem).then((ret) => {
                  if (ret.data.errcode === 0) {
                    this.$Message.success('修改成功!')
                    // this.$router.push({
                    //   name: 'projectCapitalList'
                    // })
                  } else {
                    this.$Message.error('修改失败！！！' + ret.data.errmsg)
                  }
                })
              } else {
                this.$Message.error('请检查必填项！！!')
              }
            })
          }
        } else {
          // this.formItem.id = this.$route.query.para.id;
          // console.log(this.formItem.id,'this.formItem.id')
          this.$refs['formItem'].validate((valid) => {
            if (valid) {
              // 编辑保存数据
              supervisesupdate(this.formItem).then((ret) => {
                console.log(this.formItem, 'this.formItem')
                console.log(ret, 'retdata')
                if (ret.data.errcode === 0) {
                  this.$Message.success('保存成功!')
                  // this.success();
                  // this.$router.push({
                  //   name: 'projectCapitalList'
                  // })
                } else {
                  this.$Message.error('保存失败！！！' + ret.data.errmsg)
                }
              })
            } else {
              this.$Message.error('请检查必填项！！!')
            }
          })
        }
      }
    },
    confirmd () {
      this.$Modal.confirm({
        title: '请前往完善行权事项信息',
        content: '<p>请前往完善行权事项信息</p>',
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove()
            this.formItem.id = this.rtobj.id
            this.$router.push({
              name: 'editCapital',
              query: {
                id: this.formItem.id,
                vtype: '2',
                project_name: this.rtobj.project_name,
                para: this.formItem
              }
            })
          }, 200)
        },
        onCancel: () => {
          this.$router.push({ name: 'projectCapitalList' })
        }
      })
    }

  },
  watch: {

  }
}
</script>

<style scoped lang="less">
.tag-box {
  margin-bottom: 10px;
}

/deep/ .ivu-col-span-2 {
  margin-top: 23px;
}

.button-group {
  text-align: center;
}

.upload-icon {
  padding-left: 10px;
}

/deep/ .ivu-tooltip {
  /*width: 100%;*/
}

.excel-help {
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  color: orange;
  cursor: pointer;
}
.dx {
  margin-left: 8%;
}
.other-style {
  display: inline-flex;
  margin-left: -2%;
}
</style>
